// 导入外部文件******************
import Vue from 'vue'
import app from "./app.vue"
import Elementui from 'element-ui'
import axios from 'axios'
import VueRouter from 'vue-router'
import router from './router' // 引入外部路由文件
import 'element-ui/lib/theme-chalk/index.css'
import './lib/fontawsome/css/font-awesome.min.css'
import moment from 'moment' //导入时间格式插件
import Vuex from 'vuex' //导入公共数据管理插件
import $ from 'jquery'

// 启用导入模块******************
Vue.use(Elementui)
Vue.use(VueRouter)
Vue.use(Vuex)

Vue.prototype.$ajax = axios; // 在组件中使用  this.$ajax.get("").then(res=>{}).catch(err=>{})
axios.defaults.baseURL = 'http://49.235.95.107/api'; // 腾讯云服务器地址，开放8000端口

//http REQUEST 拦截器   -- 每次request都带token 在访问不需要认证的接口时401--目前在每个组件中单独使用token
axios.interceptors.request.use(config => {
    // Do something before request is sent
    let token = window.localStorage.getItem("token")
    if (token !== null) {
        config.headers.Authorization = `JWT ${token}`;
        return config;
    } else {
        return config;
    }


}, error => {
    // Do something with request error
    return Promise.reject(error);
});
//http response 拦截器
axios.interceptors.response.use(
    undefined,
    error => {
        let res = error.response;
        switch (res.status) {
            case 400:
                return Promise.reject({
                    "detail": 400
                })
            case 401:
                // 返回 401 清除token信息并跳转到登录页面
                // store.commit(types.LOGOUT);
                //router.replace({
                // path: '/app/login',
                // query: {redirect: router.currentRoute.fullPath}
                //})
                return Promise.reject({
                    "detail": 401
                })
            //console.log('未登录 或者token过期');
            case 403:
                //console.log('您没有该操作权限');
                return Promise.reject({
                    "detail": "您没有该操作权限"
                })
            // alert('您没有该操作权限');
            case 500:
                //console.log('服务器错误');
                return Promise.reject({
                    "detail": "服务器错误"
                })
            // alert('服务器错误');
        }
        //return Promise.reject(error.response.data) // 返回接口返回的错误信息
    });
// 全局时间过滤器 **************************************
Vue.filter("timeF", function (timestr, pattern = "YYYY-MM-DD") { //定义全局过滤器*---使用moment插件定义
    return moment(timestr).format(pattern)
})

Vue.filter("serverstatus", function (val) {
    if (val == null) return "";
    if (val == "1") {
        return "处理中"
    } else if (val == "2") {
        return "完结"
    } else if (val == "3") {
        return "后续处理"
    }
})


// Vuex 实例
let store = new Vuex.Store({ //全局注册注册一个Vuex实例 ---项目组件公共数据的管理工具 
    // 使用场景： 多个视图组件依赖于同一状态。 也就是整个项目的公共数据需要vuex来进行统一管理 类似用户的购物车
    // 方便的解决了组件之间数据传输的难题尤其是兄弟组件之间的传输，当然还有嵌套组件。。。
    state: { //state属性类似于DATA属性，是用来存储公共数据的 调用：this.$store.state.***
        commonData: [],
        goodDetailId: null,
        userInfos: null,
        userFavList: null,
        userShopCarList: null,
        userOrderList: [],
        userAdressList: null
    },
    mutations: {
        //mutations类似于methods  ，是用来写业务逻辑的   不推荐让组件们直接操作state中的数据--不好维护; 
        //应该通过mutations里面的方法操作数据
        //组件们调用mutations里面的方法的书写格式为：this.$store.commit('mutations内的方法名')
        //mutations里的方法函数的第一个参数只能是state,第二个参数是组件们传过来的；注意：mutations最多只接受两个参数
        upgoodDetailId(state, goodId) { // 在app.vue里获取数据时存进store
            this.state.goodDetailId = goodId;
        },
        updateUserInfos(state, userinfo) {
            this.state.userInfos = userinfo
        },
        updateUserFavList(state, favList) {
            this.state.userFavList = favList
        },
        updateShopcar(state, shopCarList) {
            this.state.userShopCarList = shopCarList
        },
        updateUserOrderList(state, userOrderLists) {
            this.state.userOrderList = userOrderLists
        },
        updateUserAddress(state, addressList) {
            this.state.userAdressList = addressList
        },
        AddToOrderList(state, newOrder) {
            if (this.state.userOrderList == null) {
                this.state.userOrderList = []
                this.state.userOrderList.push(newOrder)
            } else {
                this.state.userOrderList.push(newOrder)
            }

        },
        addToShopCar(state, shopcarObj) {
            if (this.state.userShopCarList == null) {
                this.state.userShopCarList = []
            };
            this.state.userShopCarList.push(shopcarObj)
        },
        logout(state) {
            this.state.userInfos = null
        }
    },
    getters: {
        //如果store中state的数据在向外提供的时候需要做一层包装则推荐使用getters来定义包装函数/getters里的函数接受的参数跟mutations一样
        //如果组件们需要使用getters，则用this.$store.getters.getters内部的方法（参数）
        getgoodDetailId(state) {
            return state.goodDetailId
        },
        getUserFavList(state) {
            return state.userFavList
        },
        getUserOrderList(state) {
            return state.userOrderList
        },
        getshopcarList(state) {
            return state.userShopCarList
        },
        getUserInfos(state) {
            return state.userInfos
        },
        getUserAddress(state) {
            return state.userAdressList
        }
    }
});


Vue.filter("statusFilter", function (val) {
    if (val == 0) {
        return "未付款";
    } else if (val == 1) {
        return "未付款";
    } else if (val == 2) {
        return "已付款";
    } else if (val == 3) {
        return "正在发货途中";
    } else if (val == 4) {
        return "订单已结束";
    }
});
Vue.filter("serverStatusFormat", function (val) {
    if (val == 1) {
        return "退货退款";
    } else if (val == 2) {
        return "物流延迟";
    } else if (val == 3) {
        return "以旧换新";
    } else if (val == 4) {
        return "期内保修";
    } else if (val == 5) {
        return "技术求救";
    } else if (val == 6) {
        return "其他类型";
    }
});

// Vue实例

var vm = new Vue({
    el: "#app",
    render: c => c(app),
    router, //挂载抽离的路由文件--router.js
    store //挂载vuex实例--store状态管理对象
});